<!-- 申请列表 -->
<template>
  <div>
    <el-card style="width: 70%; margin: 0 auto; margin-top: 20px">
      <div style="display: flex; align-items: center">
        <h1 style="width: 300px">已收到的申请</h1>
        <el-input
          v-model="searchKey"
          style="width: 200px"
          @keydown.enter="
            () => {
              getApplyList();
              getApplyStat();
            }
          "
          placeholder="搜索职位"
        ></el-input>
      </div>
      <div style="display: flex">
        <div class="card">
          <div>所有申请</div>
          <div style="font-weight: bold; margin-top: 10px">{{ stat.all }}</div>
        </div>
        <div class="card">
          <div>待处理</div>
          <div style="font-weight: bold; margin-top: 10px">
            {{ stat.processing }}
          </div>
        </div>
        <div class="card">
          <div>已审批</div>
          <div style="font-weight: bold; margin-top: 10px">
            {{ stat.completed }}
          </div>
        </div>
      </div>
      <div style="margin-top: 40px">
        <div style="border-bottom: 1px solid #efefef">
          <h3>申请记录</h3>
        </div>
        <div
          v-for="item in list"
          :key="item.id"
          style="border-bottom: 1px solid #efefef"
        >
          <div style="display: flex; justify-content: space-between">
            <div style="width: 80%; padding: 20px">
              <div style="font-size: 14px; font-weight: bold; color: blak">
                {{ item.companyName }}&emsp;{{ item.workLocation }}&emsp;{{
                  item.applyTime
                }}
              </div>
              <div style="margin-top: 5px">
                岗位：{{ item.postName }}&emsp;薪资：{{ item.salaryMin }}-{{
                  item.salaryMax
                }}元
              </div>
              <div style="margin-top: 5px">
                申请人：{{ item.realName }}&emsp;<el-tag type="info">{{
                  item.qualification
                }}</el-tag>
                <el-tag type="info" style="margin-left: 10px">{{
                  item.workYears
                }}</el-tag>
              </div>
            </div>
            <div style="width: 20%; padding: 20px">
              <el-button
                type="primary"
                @click="setStat(item)"
                v-if="item.status == '待审批'"
                >审批</el-button
              >
              <el-link
                style="margin-right: 12px"
                v-else
                :type="
                  options6.find((item1) => item1.label == item.status)?.value
                "
                :underline="false"
              >
                {{ item.status }}</el-link
              >
              <Details :id="item.userId" :info="item"></Details>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px; display: flex; justify-content: flex-end">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          v-model:current-page="page"
          :pageSize="pageSize"
          @current-change="getApplyList"
        />
      </div>
      <el-dialog v-model="outerVisible" title="审批" width="500">
        <span>是否通过本条申请</span>
        <el-dialog
          v-model="innerVisible1"
          width="500"
          title="面试信息填写"
          append-to-body
        >
          <div style="padding: 10px">
            面试地点：
            <el-input
              v-model="msForm.interviewLocation"
              style="width: 250px"
            ></el-input>
          </div>
          <div style="padding: 10px">
            面试时间：
            <el-date-picker
              style="width: 250px"
              v-model="msForm.interviewTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
          <div style="padding: 10px">
            联系电话：
            <el-input v-model="msForm.phone" style="width: 250px"></el-input>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button
                @click="
                  () => {
                    innerVisible1 = false;
                    msForm.phone = '';
                    msForm.interviewLocation = '';
                    msForm.interviewTime = '';
                  }
                "
                >返回</el-button
              >
              <el-button type="primary" @click="sp"> 确认 </el-button>
            </div>
          </template>
        </el-dialog>
        <el-dialog
          v-model="innerVisible2"
          width="500"
          title="不通过原因填写"
          append-to-body
        >
          <el-input v-model="msForm.reason"></el-input>
          <template #footer>
            <div class="dialog-footer">
              <el-button
                @click="
                  () => {
                    innerVisible2 = false;
                    msForm.reason = '';
                  }
                "
                >返回</el-button
              >
              <el-button type="primary" @click="sp"> 确认 </el-button>
            </div>
          </template>
        </el-dialog>
        <template #footer>
          <div class="dialog-footer">
            <el-button
              @click="
                innerVisible2 = true;
                msForm.status = '审批不通过';
              "
              >不通过</el-button
            >
            <el-button
              type="primary"
              @click="
                innerVisible1 = true;
                msForm.status = '审批通过';
              "
            >
              通过
            </el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { reqApplyList, reqApplyStat, reqApplyExamine } from "@/api/api";
import { ElMessage } from "element-plus";
import { options6 } from "../Job/config";
import Details from "./Details.vue";
const list = ref([]);
const searchKey = ref("");
const pageSize = ref(5);
const page = ref(1);
const total = ref(0);
const outerVisible = ref(false);
const innerVisible1 = ref(false);
const innerVisible2 = ref(false);

const msForm = ref({
  id: "",
  userId: "",
  companyName: "",
  postName: "",
  status: "",
  reason: "",
  interviewLocation: "",
  interviewTime: "",
  phone: "",
});
const stat = ref({
  all: 0,
  completed: 0,
  processing: 0,
});
const getApplyList = async () => {
  const res = await reqApplyList({
    pageSize: pageSize.value,
    page: page.value,
    keyword: searchKey.value,
  });
  if (res.code === 200) {
    total.value = res.data.totalRow;
    list.value = res.data.records;
  }
};

const getApplyStat = async () => {
  const res = await reqApplyStat({ keyword: searchKey.value });
  if (res.code === 200) {
    console.log(res.data);
    stat.value = res.data;
  }
};

const setStat = (item) => {
  outerVisible.value = true;
  msForm.value.id = item.id;
  msForm.value.userId = item.userId;
  msForm.value.companyName = item.companyName;
  msForm.value.postName = item.postName;
};

onMounted(() => {
  getApplyList();
  getApplyStat();
});

const sp = async () => {
  console.log(msForm.value);
  const res = await reqApplyExamine(msForm.value);
  if (res.code == 200) {
    ElMessage.success("操作成功");
    outerVisible.value = false;
    innerVisible1.value = false;
    innerVisible2.value = false;
    getApplyList();
    getApplyStat();
  }
};
</script>

<style lang="scss" scoped>
.card {
  border: 1px solid rgb(221, 221, 221);
  border-radius: 20px;
  background-color: rgba($color: #f7b6b6, $alpha: 0.3);
  padding: 15px;
  width: 300px;
  margin-right: 30px;
}
</style>
